<template>
  <div>
    <div class="pageheader">
      <el-button icon="el-icon-setting" v-hasPermi="['system:material:manageset']" size="small" class="scsetbtn" @click="openSetting">素材管理设置</el-button>
      <div
        v-for="(item, index) in list"
        :key="index"
        class="pageitem commhover c_text f-14 fw-6"
        :class="{ active: activeId === item.id }"
        @click="goPage(item)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="pagewrapper2">
      <material-page :listType="activeId" />
    </div>
    <!-- 素材管理设置 -->
    <MaterialMgtSetting v-if="settingopen" :visable='settingopen' @close='closeSetting' />
  </div>
</template>
<script>
import MaterialPage from './MaterialPage.vue';
import MaterialMgtSetting from './MaterialMgtSetting.vue'
// import { mapGetters } from "vuex";
export default {
  data() {
    return {
      list: [
        { name: "企业素材库", id: 0 },
        { name: "个人素材库", id: 1 },
      ],
      activeId: 0,
      settingopen:false
    };
  },
  components:{
    MaterialPage,
    MaterialMgtSetting
  },
  methods: {
    goPage(item) {
      this.activeId = item.id;
      console.log("item:", item, this.activeId);
      //   this.$router.push({name:item.name})
    },

    openSetting(){
      this.settingopen = true
    },

    closeSetting(){
      this.settingopen = false
    }
  },
};
</script>
<style lang="scss" scoped>
.pageheader {
  width: 100%;
  height: 46px;
  position: sticky;
  top: 0;
  z-index: 8;
  height: 46px;
  padding: 0 20px;
  background: #fff;
  border-bottom: 1px solid #e9e9e9;
}
.pageitem {
  display: inline-block;
  height: 100%;
  line-height: 46px;
  border-bottom: 2px solid transparent;
  width: auto;

  &.active {
    color: #3070ff;
    border-bottom-color: #3070ff;
  }
  &:not(:first-child) {
    margin-left: 32px;
  }
}
.scsetbtn{
  position: absolute;
  right: 20px;
  top: 7px;
}
</style>
